<div class="sticky top-0 w-full flex justify-start items-center px-3 pt-3 pb-2 z-10
  bg-components-panel-bg">
  <emoji-avatar [avatar]="toolset()?.avatar" small class="shrink-0 mr-2 rounded-lg overflow-hidden shadow-sm" />
  <div class="flex flex-col">
    <span class="text-base">{{toolset()?.name}}</span>
  </div>

  <div class="flex-1"></div>

  <div class="flex justify-between items-center gap-1">
    @if(!isTemplate()) {
      <button type="button" class="action-btn action-btn-sm justify-center w-6 h-6 p-0.5 rounded-md pressable"
        [matTooltip]="'PAC.Xpert.RefreshToolset' | translate: {Default: 'Refresh, sync toolset configuration'}"
        matTooltipPosition="above"
        (click)="refresh()">
        <i class="ri-refresh-line"></i>
      </button>
    }

    <div class="flex items-center justify-center w-8 h-8 rounded-md cursor-pointer
      text-text-tertiary hover:text-base-content hover:bg-hover-bg"
      (click)="closePanel()"
    >
      <ngm-close-svg class="w-5 h-5" />
    </div>
  </div>
</div>

<div class="max-w-full shrink-0 px-4 my-4 text-text-tertiary text-sm line-clamp-3">
  {{toolset()?.description}}
</div>

@if (isTemplate()) {
  <div class="flex flex-col justify-start items-stretch p-4 space-y-4 w-full">
    <button class="btn btn-large btn-primary self-center" (click)="configureToolBuiltin()">
      {{ 'PAC.Xpert.Reconfigure' | translate: {Default: 'Reconfigure'} }}
    </button>

    <div class="flex items-center mb-4 leading-[18px] text-base font-semibold text-gray-500 uppercase">
      <div class="mr-3">{{'PAC.Xpert.OrReselect' | translate: { Default: 'Or reselect'} }}</div>
      <div class="grow w-0 h-px bg-divider-regular"></div>
    </div>

    <ul class="p-2 flex flex-col gap-1">
      @for (toolset of toolsets(); track toolset.id) {
        <li class="group/item w-full flex flex-col items-stretch px-2 py-1 rounded-lg border-[0.5px] border-solid border-transparent hover:border-gray-100">
          <div class="relative flex items-center w-full">
            <emoji-avatar small [avatar]="toolset.avatar" class="mr-1 shrink-0 rounded-lg overflow-hidden shadow-sm" />
            {{toolset.name}}

            <button type="button" class="absolute right-0 btn btn-small opacity-0 group-hover/item:opacity-100"
              (click)="useToolset(toolset)"
            >
              {{ 'PAC.Xpert.Use' | translate: {Default: 'Use'} }}
            </button>
          </div>
        </li>
      }
    </ul>
  </div>
}


<div class="w-full flex flex-col gap-2 p-2">
  @for (tool of tools(); track tool.id) {
    <div class="w-full flex flex-col">
      <div class="my-2 h-[1px] bg-divider-subtle"></div>
      <div class="w-full flex justify-start items-center">
        <button class="w-7 h-7 mr-1 flex justify-center items-center rounded-lg pressable enabled:hover:bg-hover-bg enabled:cursor-pointer"
          (click)="toggleExpand(tool.name)"
        >
          <i class="ri-arrow-up-s-line text-text-tertiary transition-transform origin-center"
            [ngClass]="{'rotate-90': !expandTools()[tool.name]}"></i>
        </button>
        <div class="px-2 truncate">{{tool.name | i18n}}</div>
      </div>

    @if (expandTools()[tool.name]) {
      <div class="px-2 text-text-secondary line-clamp-3">{{tool.description | i18n}}</div>

      <div class="w-full flex justify-end px-2 mb-4">
        <mat-slide-toggle [ngModel]="getSensitive(tool.name)" (ngModelChange)="updateSensitive(tool.name, $event)"
          labelPosition="before"
          ngm-density="xs"
          [matTooltip]="'PAC.Xpert.SensitiveToolsTip' | translate: {Default: 'Sensitive tools require user confirmation before execution'}"
          matTooltipPosition="above"
        >{{'PAC.Xpert.Sensitive' | translate: {Default: 'Sensitive'} }}</mat-slide-toggle>
      </div>

      <div class="w-full flex justify-end px-2 mb-4">
        <mat-slide-toggle [ngModel]="isEnd(tool.name)" (ngModelChange)="updateEnd(tool.name, $event)"
          labelPosition="before"
          ngm-density="xs"
          [matTooltip]="'PAC.Xpert.EndTool' | translate: {Default: 'End point tool, the conversation ends when tool completed'}"
          matTooltipPosition="above"
        >{{'PAC.Xpert.End' | translate: {Default: 'End'} }}</mat-slide-toggle>
      </div>

      <div class="w-full flex justify-end px-2 mb-4">
        <mat-slide-toggle [ngModel]="toolMemory(tool.name)" (ngModelChange)="toggleToolMemory(tool.name, $event)"
          labelPosition="before"
          ngm-density="xs"
          [matTooltip]="'PAC.Xpert.ToolMemoryTip' | translate: {Default: 'Tool memory, storing tool results in agent state variables'}"
          matTooltipPosition="above"
        >{{'PAC.Xpert.ToolMemory' | translate: {Default: 'Tool Memory'} }}</mat-slide-toggle>
      </div>

      @if (toolMemory(tool.name)) {
        <xpert-variables-assigner class="p-2"
          [title]="'PAC.Xpert.WritetoMemory' | translate: {Default: 'Write to memory'}"
          [tooltip]="'PAC.Xpert.WriteToolResultToMemoryTooltip' | translate: {Default: 'Write tool output to global memory of the digital expert'}"
          type="tool"
          [variables]="variables()"
          [memories]="toolMemory(tool.name)"
          (memoriesChange)="updateToolMemory(tool.name, $event)"
        />
      }

      <xpert-tool-test [tool]="tool" class="w-full px-2 mt-4" [enabled]="tool.enabled" />
    }
    </div>
  }
</div>

@if (loading()) {
  <ngm-spin class="absolute top-0 left-0 w-full h-full"/>
}